<template>
	<view class="dmm-container dmm-container-grey">
		<u-search placeholder="搜索" height="72" margin="0 30rpx 20rpx" bgColor="#fff" placeholderColor="#d7d7d7" shape="square" v-model="search" :showAction="false" @search="getList({search, type: 'agent'})"></u-search>
		
		<view class="section summary">
		  <u-cell-group :border="false">
				<u-cell title="代理商默认结算价" isLink url="/pages/agentManage/changeRate?modifyType=2">
					<view slot="value">
						<text class="rate">{{agentInfo.nextAgentRate}}%</text>
					</view>
				</u-cell>
				<u-cell title="本月代理商总交易额">
					<text slot="value">{{agentInfo.mount}}元</text>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view class="section">
		  <u-cell-group :border="false">
				<u-cell v-for="(item, index) in list" :key="index" :title="item.agentName" :label="agentStatusEnum[item.agentStatus]" :url="`/pages/agentManage/detail?agentNo=${item.agentNo}`">
					<view slot="value" class="u-cell__value">
						<text class="amt">{{item.mount | toFixed2}}元</text>
						<cl-make-call-phone :phone="item.mobile"></cl-make-call-phone>
					</view>
				</u-cell>
			</u-cell-group>
			
		</view>
		
		<view class="tip" v-if="!hasData">
			<text class="text text-tip">- {{list.length ? '没有数据了' : '暂无数据'}} -</text>
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapActions } from "vuex"
	import { agentStatusEnum } from "@/common/constants.js"
	
	export default {
		data() {
			return {
				agentStatusEnum,
				search: '',
			};
		},
		
		computed: {
			...mapState('home', ['agentInfo']),
			...mapState('manage', ['list', 'pageNum', 'hasData'])
		},
		
		methods: {
			...mapActions('manage', ['getList']),
		},
		
		onShow() {
			this.getList({type: 'agent'})
		},
		
		onReachBottom() {
			if (this.hasData) this.getList({pageNum: this.pageNum + 1, search: this.search, type: 'agent'})
		},
	}
</script>

<style lang="scss">
	.dmm-container {
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	.section {
		margin: 0 30rpx 20rpx;
		padding: 0 30rpx;
		border-radius: $uni-border-radius-lg;
		background-color: #fff;
		.u-cell {
			image {
				height: 42rpx;
				width: 42rpx;
				margin-right: 14rpx;
			}
			
			/deep/ .u-cell__body {
				padding: 38rpx 0;
				
				.u-cell__label {
					font-size: 24rpx;
					border-radius: 4rpx;
					background-color: $u-bg-color;
					height: 34rpx;
					line-height: 34rpx;
					width: 98rpx;
					text-align: center;
				}
				
				.u-cell__value {
					display: flex;
					flex-direction: row;
					align-items: center;
					
					.amt {
						font-size: 32rpx;
						font-weight: 700;
						margin-right: 38rpx;
					}
					
					image {
						height: 41rpx;
						width: 34rpx;
					}
				}
			}
			
			/deep/ text {
				font-size: 28rpx;
			}
		}
	}
	
	.u-search {
		/deep/ .u-search__content {
			border-radius: 16rpx !important;
		}
	}
	
	.summary {
		.u-cell {
			/deep/ .u-cell__title-text {
				font-weight: 700;
			}
		}
	}
	
	.u-popup {
		/deep/ .u-popup__content {
			border-top-right-radius: 16rpx;
			border-top-left-radius: 16rpx;
			
			.u-action-sheet__description {
				font-size: 28rpx;
				color: $uni-text-color-muted;
			}
			.u-gap {
				height: 20rpx;
				background-color: $u-bg-color;
			}
		}
	}
	
	.tip {
		text-align: center;
	}
</style>
